<!-- 预览时被GenerateFormItem调用,生成具体组件-->
<template>
  <span>
    <div>
      <el-dialog
        title="添加批注"
        :visible.sync="annotationDialogVisible"
        width="25%"
        :modal-append-to-body="true"
        :append-to-body="true"
      >
        <el-form
          :inline="true"
          :model="annotationForm"
          style="margin-left: -25px;"
        >
          <el-form-item label="批注内容">
            <el-input
              type="textarea"
              v-model="annotationForm.context"
              :rows="2"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="annotationConfirm">确 定</el-button>
          <el-button @click="annotationDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="clearAnnotation"
            >清除批注</el-button
          >
        </span>
      </el-dialog>
    </div>
    <template v-if="widget.type == 'blank'">
      <div :style="{ width: elShowWidth(isTable, widget.options.width) }">
        <slot :name="widget.model" :model="dataModels"></slot>
      </div>
    </template>

    <template v-if="widget.type == 'input' && widget.options.show == true">
      <span v-if="widget.tip !== undefined && widget.tip != null">
        <el-tooltip
          class="item"
          effect="dark"
          :content="widget.tip"
          placement="right-end"
        >
          <el-input
            v-if="
              widget.options.dataType == 'number' ||
                widget.options.dataType == 'integer' ||
                widget.options.dataType == 'float'
            "
            :type="widget.options.dataType"
            :name="widget.model"
            v-model.number="dataModel"
            :disabled="widget.options.disabled"
            :placeholder="widget.options.placeholder"
            :clearable="widget.options.clearable"
            :style="{ width: elShowWidth(isTable, widget.options.width) }"
          >
          </el-input>

          <el-input
            v-else
            :type="widget.options.dataType"
            v-model="dataModel"
            :name="widget.model"
            :disabled="widget.options.disabled"
            :placeholder="widget.options.placeholder"
            :style="{ width: elShowWidth(isTable, widget.options.width) }"
          >
          </el-input>
        </el-tooltip>
      </span>

      <span v-else>
        <el-input
          v-if="
            widget.options.dataType == 'number' ||
              widget.options.dataType == 'integer' ||
              widget.options.dataType == 'float'
          "
          :type="widget.options.dataType"
          :name="widget.model"
          v-model.number="dataModel"
          :disabled="widget.options.disabled"
          :placeholder="widget.options.placeholder"
          :clearable="widget.options.clearable"
          show-password="{widget.options.showPassword==true}"
          :style="{ width: elShowWidth(isTable, widget.options.width) }"
        >
        </el-input>

        <span v-else>
          <el-input
            v-if="widget.options.showPassword == true"
            :type="widget.options.dataType"
            v-model="dataModel"
            :name="widget.model"
            :disabled="widget.options.disabled"
            :placeholder="widget.options.placeholder"
            :clearable="widget.options.clearable"
            show-password
            :style="{ width: elShowWidth(isTable, widget.options.width) }"
          >
          </el-input>
          <el-input
            v-else
            :type="widget.options.dataType"
            v-model="dataModel"
            :name="widget.model"
            :disabled="widget.options.disabled"
            :placeholder="widget.options.placeholder"
            clearable
            :style="{ width: elShowWidth(isTable, widget.options.width) }"
          >
            <template
              v-if="
                widget.options.unit != undefined &&
                  widget.options.unit.length > 0
              "
              slot="append"
              >{{ widget.options.unit }}</template
            >
          </el-input>
        </span>
        <span
          v-if="widget.options.showAnnotation"
          :style="{
            'margin-left': showAnnotation(),
            color: showAnnotationColor()
          }"
          v-on:click="addAnnotation()"
          >{{ widget.options.annotationTitle }}
        </span>
      </span>
    </template>
    <el-dialog
      title=""
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
      width="80%"
    >
      <el-table :data="customDialogData" @row-click="singleElection">
        <el-table-column width="55">
          <template slot-scope="scope">
            <el-radio
              class="radio"
              v-model="templateSelection"
              :label="scope.$index"
              >&nbsp;</el-radio
            >
          </template>
        </el-table-column>
        <el-table-column
          v-for="(customDialogTableColumn,
          customDialogTableIndex) in customDialogTableColumns"
          :key="customDialogTableIndex"
          :prop="customDialogTableColumn.columnKey"
          :label="customDialogTableColumn.description"
        >
        </el-table-column>
      </el-table>

      <el-pagination
        :page-sizes="[10, 20, 30, 50, 100]"
        :current-page="formCustomDialogCurrentPage"
        :page-size="formCustomDialogPageSize"
        :total="formCustomDialogTotal"
        @size-change="handleformCustomDialogSizeChange"
        @current-change="handleformCustomDialogCurrentChange"
        layout="total,jumper,prev, pager, next,sizes"
      >
      </el-pagination>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click.native="confirmFormCustomDialog()"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <template v-if="widget.type == 'dialog'">
      <el-button
        type="primary"
        :class="widget.options.icon"
        @click="handleDialog()"
        >{{ widget.options.btnName }}</el-button
      >
    </template>
    <el-dialog
      title=""
      :visible.sync="userDialogFormVisible"
      :append-to-body="true"
      width="80%"
    >
      <el-table
        v-if="widget.options.isSingle"
        :data="customDialogData"
        @selection-change="userDialogFormchangeFun"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          v-for="(item, index) in customDialogTableColumns"
          :key="index"
          :prop="item.columnKey"
          :label="item.description"
        >
        </el-table-column>
      </el-table>
      <el-table
        v-else
        :data="customDialogData"
        @row-click="userDialogingleElection"
      >
        <el-table-column width="55">
          <template slot-scope="scope">
            <el-radio
              class="radio"
              v-model="templateSelection"
              :label="scope.$index"
              >&nbsp;</el-radio
            >
          </template>
        </el-table-column>
        <el-table-column
          v-for="(customDialogTableColumn,
          customDialogTableIndex) in customDialogTableColumns"
          :key="customDialogTableIndex"
          :prop="customDialogTableColumn.columnKey"
          :label="customDialogTableColumn.description"
        >
        </el-table-column>
      </el-table>

      <el-pagination
        :page-sizes="[10, 20, 30, 50, 100]"
        :current-page="formCustomDialogCurrentPage"
        :page-size="formCustomDialogPageSize"
        :total="formCustomDialogTotal"
        @size-change="handleUserformCustomDialogSizeChange"
        @current-change="handleUserformCustomDialogCurrentChange"
        layout="total,jumper,prev, pager, next,sizes"
      >
      </el-pagination>
      <div slot="footer" class="dialog-footer">
        <el-button @click="userDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click.native="confirmUserFormCustomDialog()"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <template v-if="widget.type == 'userDialog'">
      <el-tag
        v-for="(tag, index) in widget.options.chooseFiledList"
        :key="tag.key"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)"
      >
        {{ tag.lable }}
      </el-tag>

      <el-button
        type="primary"
        :class="widget.options.icon"
        @click="handleUserDialog()"
        >{{ widget.options.btnName }}</el-button
      >
    </template>

    <template v-if="widget.type == 'iframe' && widget.options.show == true">
      <iframe
        frameborder="0"
        scrolling="auto"
        :src="widget.options.src"
        :width="widget.options.width"
        :height="widget.options.height"
      ></iframe>
    </template>
    <template v-if="widget.type == 'textarea' && widget.options.show == true">
      <el-input
        type="textarea"
        :rows="1"
        v-model="dataModel"
        :disabled="widget.options.disabled"
        :placeholder="widget.options.placeholder"
        :style="{ width: elShowWidth(isTable, widget.options.width) }"
      ></el-input>
      <span
        v-if="widget.options.showAnnotation"
        :style="{
          'margin-left': showAnnotation(),
          color: showAnnotationColor()
        }"
        v-on:click="addAnnotation()"
        >{{ widget.options.annotationTitle }}
      </span>
    </template>
    <template v-if="widget.type == 'badge' && widget.options.show == true">
      <el-badge
        :value="widget.options.defaultValue"
        :max="widget.options.max"
        :is-dot="widget.options.dot"
        v-model="widget.options.defaultValue"
        class="item"
      >
      </el-badge>
      <span
        v-if="widget.options.showAnnotation"
        :style="{
          'margin-left': showAnnotation(),
          color: showAnnotationColor()
        }"
        v-on:click="addAnnotation()"
        >{{ widget.options.annotationTitle }}
      </span>
    </template>
    <template
      v-if="widget.type == 'inputNumber' && widget.options.show == true"
    >
      <el-input-number
        v-model="dataModel"
        :max="widget.options.max"
        :min="widget.options.min"
        :step="widget.options.step"
        :disabled="widget.options.disabled"
        :size="widget.options.radioSize"
      >
      </el-input-number>
      <span
        v-if="widget.options.showAnnotation"
        :style="{
          'margin-left': showAnnotation(),
          color: showAnnotationColor()
        }"
        v-on:click="addAnnotation()"
        >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type == 'number' && widget.options.show == true">
      <el-input-number
        v-model="dataModel"
        :style="{ width: elShowWidth(isTable, widget.options.width) }"
        :step="widget.options.step"
        :disabled="widget.options.disabled"
        controls-position="right"
      ></el-input-number>
      <span
        v-if="widget.options.showAnnotation"
        :style="{
          'margin-left': showAnnotation(),
          color: showAnnotationColor()
        }"
        v-on:click="addAnnotation()"
        >{{ widget.options.annotationTitle }}
      </span>
    </template>
    <template v-if="widget.type == 'h4'">
      <h4>{{ widget.options.defaultValue }}</h4>
      <span
        v-if="widget.options.showAnnotation"
        :style="{
          'margin-left': showAnnotation(),
          color: showAnnotationColor()
        }"
        v-on:click="addAnnotation()"
        >{{ widget.options.annotationTitle }}
      </span>
    </template>
    <template v-if="widget.type == 'p'">
      <p>{{ widget.options.defaultValue }}</p>
      <span
        v-if="widget.options.showAnnotation"
        :style="{
          'margin-left': showAnnotation(),
          color: showAnnotationColor()
        }"
        v-on:click="addAnnotation()"
        >{{ widget.options.annotationTitle }}
      </span>
    </template>
    <template v-if="widget.type == 'small'">
      <small>{{ widget.options.defaultValue }}</small>
      <span
        v-if="widget.options.showAnnotation"
        :style="{
          'margin-left': showAnnotation(),
          color: showAnnotationColor()
        }"
        v-on:click="addAnnotation()"
        >{{ widget.options.annotationTitle }}
      </span>
    </template>
    <template v-if="widget.type == 'mark'">
      <mark>{{ widget.options.defaultValue }}</mark>
      <span
        v-if="widget.options.showAnnotation"
        :style="{
          'margin-left': showAnnotation(),
          color: showAnnotationColor()
        }"
        v-on:click="addAnnotation()"
        >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type == 'del'">
      <del>{{ widget.options.defaultValue }}</del>
      <span
        v-if="widget.options.showAnnotation"
        :style="{
          'margin-left': showAnnotation(),
          color: showAnnotationColor()
        }"
        v-on:click="addAnnotation()"
        >{{ widget.options.annotationTitle }}
      </span>
    </template>
    <template v-if="widget.type == 'u'">
      <u>{{ widget.options.defaultValue }}</u>
    </template>
    <template v-if="widget.type == 'em'">
      <em>{{ widget.options.defaultValue }}</em>
    </template>
    <template v-if="widget.type == 'strong'">
      <strong>{{ widget.options.defaultValue }}</strong>
      <span
        v-if="widget.options.showAnnotation"
        :style="{
          'margin-left': showAnnotation(),
          color: showAnnotationColor()
        }"
        v-on:click="addAnnotation()"
        >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type == 'icon'">
      <i :class="widget.options.icon">{{ widget.options.defaultValue }}</i>
      <span
        v-if="widget.options.showAnnotation"
        :style="{
          'margin-left': showAnnotation(),
          color: showAnnotationColor()
        }"
        v-on:click="addAnnotation()"
        >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type == 'radio' && widget.options.show == true">
      <el-radio-group
        v-model="dataModel"
        v-if="
          widget.options.remoteUrlKey != null &&
            widget.options.remoteUrlKey == ''
        "
        :style="{ width: elShowWidth(isTable, widget.options.width) }"
      >
        <el-radio
          :style="{ display: widget.options.inline ? 'inline-block' : 'block' }"
          :label="item.value"
          :border="widget.options.border"
          :disabled="widget.options.disabled"
          v-for="(item, index) in widget.options.options"
          :key="index"
          @change="fireControlsRule"
        >
          {{ widget.options.showLabel ? item.label : item.value }}
        </el-radio>
      </el-radio-group>

      <el-radio-group
        v-model="dataModel"
        v-else
        :style="{ width: elShowWidth(isTable, widget.options.width) }"
      >
        <el-radio
          :style="{ display: widget.options.inline ? 'inline-block' : 'block' }"
          :label="item.value"
          :border="widget.options.border"
          :disabled="widget.options.disabled"
          v-for="(item, index) in remoteFuncsFields"
          :key="index"
          @change="fireControlsRule"
        >
          <template>{{
            widget.options.showLabel ? item.label : item.value
          }}</template>
        </el-radio>
      </el-radio-group>

      <span
        v-if="widget.options.showAnnotation"
        :style="{
          'margin-left': showAnnotation(),
          color: showAnnotationColor()
        }"
        v-on:click="addAnnotation()"
        >{{ widget.options.annotationTitle }}
      </span>
    </template>
    <template v-if="widget.type == 'checkbox' && widget.options.show == true">
      <el-checkbox-group
        v-model="dataModel"
        @change="checkboxChange"
        :style="{ width: isTable ? '100%' : widget.options.width }"
      >
        <el-checkbox
          :style="{ display: widget.options.inline ? 'inline-block' : 'block' }"
          :label="item.value"
          v-for="(item, index) in widget.options.remote
            ? widget.options.remoteOptions
            : widget.options.options"
          :key="index"
        >
          <template v-if="widget.options.remote">{{ item.label }}</template>
          <template v-else>{{
            widget.options.showLabel ? item.label : item.value
          }}</template>
        </el-checkbox>
      </el-checkbox-group>
    </template>

    <template v-if="widget.type == 'time' && widget.options.show == true">
      <el-time-picker
        v-model="dataModel"
        :is-range="widget.options.isRange"
        :placeholder="widget.options.placeholder"
        :start-placeholder="widget.options.startPlaceholder"
        :end-placeholder="widget.options.endPlaceholder"
        :disabled="widget.options.disabled"
        :editable="widget.options.editable"
        :clearable="widget.options.clearable"
        :arrowControl="widget.options.arrowControl"
        :value-format="widget.options.format"
        :style="{ width: elShowWidth(isTable, widget.options.width) }"
      >
      </el-time-picker>
      <span
        v-if="widget.options.showAnnotation"
        :style="{
          'margin-left': showAnnotation(),
          color: showAnnotationColor()
        }"
        v-on:click="addAnnotation()"
        >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type == 'date' && widget.options.show == true">
      <el-date-picker
        v-model="dataModel"
        :type="widget.options.type"
        :placeholder="widget.options.placeholder"
        :start-placeholder="widget.options.startPlaceholder"
        :end-placeholder="widget.options.endPlaceholder"
        :disabled="widget.options.disabled"
        :editable="widget.options.editable"
        :clearable="widget.options.clearable"
        :value-format="
          widget.options.timestamp ? 'timestamp' : widget.options.format
        "
        :format="widget.options.format"
        @change="changeDate"
        :style="{ width: elShowWidth(isTable, widget.options.width) }"
      >
      </el-date-picker>
      <span
        v-if="widget.options.showAnnotation"
        :style="{
          'margin-left': showAnnotation(),
          color: showAnnotationColor()
        }"
        v-on:click="addAnnotation()"
        >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type == 'rate' && widget.options.show == true">
      <el-rate
        v-model="dataModel"
        :max="widget.options.max"
        :disabled="widget.options.disabled"
        :allow-half="widget.options.allowHalf"
      ></el-rate>
    </template>

    <template v-if="widget.type == 'color' && widget.options.show == true">
      <el-color-picker
        v-model="dataModel"
        :disabled="widget.options.disabled"
        :show-alpha="widget.options.showAlpha"
      ></el-color-picker>
      <span
        v-if="widget.options.showAnnotation"
        :style="{
          'margin-left': showAnnotation(),
          color: showAnnotationColor()
        }"
        v-on:click="addAnnotation()"
        >{{ widget.options.annotationTitle }}
      </span>
    </template>
    <template v-if="widget.type == 'dividers'">
      <el-divider></el-divider>
    </template>
    <template v-if="widget.type == 'select' && widget.options.show == true">
      <el-select
        v-if="
          widget.options.remoteUrlKey != null &&
            widget.options.remoteUrlKey.length > 0
        "
        v-model="dataModel"
        :disabled="widget.options.disabled"
        :multiple="widget.options.multiple"
        :clearable="widget.options.clearable"
        :placeholder="widget.options.placeholder"
        :style="{ width: elShowWidth(isTable, widget.options.width) }"
        @change="fireControlsRule"
        :filterable="widget.options.filterable"
      >
        <el-option
          v-if="
            widget.options.remoteUrlKey != null &&
              widget.options.remoteUrlKey.length > 0
          "
          v-for="item in remoteFuncsFields"
          :key="item.value"
          :value="item.value"
          :label="item.value"
        >
        </el-option>
      </el-select>

      <el-select
        v-else
        v-model="dataModel"
        :disabled="widget.options.disabled"
        :multiple="widget.options.multiple"
        :clearable="widget.options.clearable"
        :placeholder="widget.options.placeholder"
        :style="{ width: elShowWidth(isTable, widget.options.width) }"
        :filterable="widget.options.filterable"
        @change="fireControlsRule"
      >
        <el-option
          v-for="item in widget.options.options"
          :key="item.value"
          :value="item.value"
          :label="item.value"
        >
        </el-option>
      </el-select>
      <span
        v-if="widget.options.showAnnotation"
        :style="{
          'margin-left': showAnnotation(),
          color: showAnnotationColor()
        }"
        v-on:click="addAnnotation()"
        >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type == 'alert'">
      <el-alert
        :title="widget.options.title"
        :closable="widget.options.closable"
        v-model="dataModel"
        :show-icon="widget.options.showIcon"
        :effect="widget.options.item"
        :type="widget.options.alertType"
        :close-text="widget.options.closeText"
        :center="widget.options.center"
        >{{ widget.options.defaultValue }}</el-alert
      >
    </template>

    <template v-if="widget.type == 'steps'">
      <el-steps
        :active="widget.options.defaultValue"
        v-model="dataModel"
        :finish-status="widget.options.finishStatus"
        :align-center="widget.options.alignCenter"
        :simple="widget.options.simple"
        :process-status="widget.options.processStatus"
        :direction="widget.options.direction"
      >
        <el-step
          v-for="item in widget.options.stepItemOptions"
          :title="item.value"
          :key="item.value"
        >
        </el-step>
      </el-steps>
      <el-button
        style="margin-top: 12px;"
        type="primary"
        @click="nextStep(widget)"
        :disabled="widget.options.nextStep"
        >下一步</el-button
      >
    </template>

    <template v-if="widget.type == 'tag'">
      <el-tag
        v-model="dataModel"
        closable
        :disable-transitions="false"
        size="widget.options.radioSize"
        @close="handleTagClose(tag, tagsIndex)"
        v-for="(tag, tagsIndex) in widget.options.options"
        :key="tagsIndex"
        :type="tag.value"
      >
        {{ tag.label }}
      </el-tag>
    </template>

    <template v-if="widget.type == 'link'">
      <el-link
        :href="widget.options.href"
        v-model="dataModel"
        :target="widget.options.target"
        :underline="widget.options.underline"
        >{{ widget.options.defaultValue }}
      </el-link>
      <span
        v-if="widget.options.showAnnotation"
        :style="{
          'margin-left': showAnnotation(),
          color: showAnnotationColor()
        }"
        v-on:click="addAnnotation()"
        >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type == 'breadcrumb'">
      <el-breadcrumb :separator="widget.options.separator">
        <el-breadcrumb-item
          v-for="item in widget.options.breadcrumbItemOptions"
          :key="item.value"
          :value="item.value"
        >
          {{ item.value }}
        </el-breadcrumb-item>
      </el-breadcrumb>
      <span
        v-if="widget.options.showAnnotation"
        :style="{
          'margin-left': showAnnotation(),
          color: showAnnotationColor()
        }"
        v-on:click="addAnnotation()"
        >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type == 'dateCalendar'">
      <el-calendar v-model="dataModel">
        <template slot="dateCell" slot-scope="{ date, data }">
          <p :class="data.isSelected ? 'is-selected' : ''">
            {{
              data.day
                .split("-")
                .slice(1)
                .join("-")
            }}
            {{ data.isSelected ? "✔️" : "" }}
          </p>
        </template>
      </el-calendar>
      <span
        v-if="widget.options.showAnnotation"
        :style="{
          'margin-left': showAnnotation(),
          color: showAnnotationColor()
        }"
        v-on:click="addAnnotation()"
        >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type == 'progress'">
      <el-progress
        :percentage="widget.options.percentage"
        :type="widget.options.progressType"
        :status="widget.options.status"
        :show-text="widget.options.showText"
        :stroke-width="widget.options.strokeWidth"
        :text-inside="widget.options.textInside"
      ></el-progress>

      <span
        v-if="widget.options.showAnnotation"
        :style="{
          'margin-left': showAnnotation(),
          color: showAnnotationColor()
        }"
        v-on:click="addAnnotation()"
        >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type == 'switch' && widget.options.show == true">
      <el-switch v-model="dataModel" :disabled="widget.options.disabled">
      </el-switch>
      <span
        v-if="widget.options.showAnnotation"
        :style="{
          'margin-left': showAnnotation(),
          color: showAnnotationColor()
        }"
        v-on:click="addAnnotation()"
        >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type == 'btn' && widget.options.show == true">
      <el-button
        :size="widget.options.radioSize"
        @click="clickBtn()"
        :style="{ 'margin-left': widget.options.marginLeft }"
        :type="widget.options.type"
        :plain="widget.options.plain"
        :round="widget.options.round"
        :circle="widget.options.circle"
        :loading="widget.options.loading"
        :icon="widget.options.icon"
        >{{ widget.options.name }}</el-button
      >
    </template>

    <template v-if="widget.type == 'slider' && widget.options.show == true">
      <el-slider
        v-model="dataModel"
        :min="widget.options.min"
        :max="widget.options.max"
        :disabled="widget.options.disabled"
        :step="widget.options.step"
        :show-input="widget.options.showInput"
        :range="widget.options.range"
        :showTooltip="widget.options.showTooltip"
        :style="{ width: elShowWidth(isTable, widget.options.width) }"
      ></el-slider>
      <span
        v-if="widget.options.showAnnotation"
        :style="{
          'margin-left': showAnnotation(),
          color: showAnnotationColor()
        }"
        v-on:click="addAnnotation()"
        >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type == 'fileUpload' && widget.options.show == true">
      <fm-upload
        v-model="dataModel"
        :disabled="widget.options.disabled"
        :style="{ width: isTable ? '100%' : widget.options.width }"
        :width="widget.options.sizes.width"
        :height="widget.options.sizes.height"
        :token="widget.options.token"
        :domain="widget.options.domain"
        :multiple="widget.options.multiple"
        :length="widget.options.length"
        :is-qiniu="widget.options.isQiniu"
        :is-delete="widget.options.isDelete"
        :min="widget.options.min"
        :is-edit="widget.options.editable"
        :action="widget.options.action"
        :supportedTypeStr="widget.options.supportedTypeStr"
      >
      </fm-upload>
      <span
        v-if="widget.options.showAnnotation"
        :style="{
          'margin-left': showAnnotation(),
          color: showAnnotationColor()
        }"
        v-on:click="addAnnotation()"
        >{{ widget.options.annotationTitle }}
      </span>
    </template>
    <template v-if="widget.type == 'imgupload' && widget.options.show == true">
      <image-upload
        v-model="dataModel"
        :disabled="widget.options.disabled"
        :style="{ width: isTable ? '100%' : widget.options.width }"
        :width="widget.options.size.width"
        :height="widget.options.size.height"
        :token="widget.options.token"
        :domain="widget.options.domain"
        :multiple="widget.options.multiple"
        :length="widget.options.length"
        :is-qiniu="widget.options.isQiniu"
        :is-delete="widget.options.isDelete"
        :min="widget.options.min"
        :is-edit="widget.options.isEdit"
        :supportedTypeStr="widget.options.supportedTypes"
        :action="widget.options.action"
      >
      </image-upload>
      <span
        v-if="widget.options.showAnnotation"
        :style="{
          'margin-left': showAnnotation(),
          color: showAnnotationColor()
        }"
        v-on:click="addAnnotation()"
        >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <!--        省市级联-->
    <template v-if="widget.type == 'cascader' && widget.options.show == true">
      <div v-if="widget.options.modeMethod == 'provinceAndCityData'">
        <el-cascader :options="provinceAndCityData" v-model="dataModel">
        </el-cascader>
      </div>
      <div v-else-if="widget.options.modeMethod == 'provinceAndCityDataPlus'">
        <el-cascader :options="provinceAndCityDataPlus" v-model="dataModel">
        </el-cascader>
      </div>
      <div v-else-if="widget.options.modeMethod == 'regionData'">
        <el-cascader :options="regionData" v-model="dataModel"> </el-cascader>
      </div>
      <div v-else-if="widget.options.modeMethod == 'selectedOptions'">
        <el-cascader :options="regionDataPlus" v-model="dataModel">
        </el-cascader>
      </div>
      <span
        v-if="widget.options.showAnnotation"
        :style="{
          'margin-left': showAnnotation(),
          color: showAnnotationColor()
        }"
        v-on:click="addAnnotation()"
        >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type == 'text' && widget.options.show == true">
      <span
        v-if="widget.options.tip !== undefined && widget.options.tip.length > 0"
      >
        <el-tooltip
          class="item"
          effect="dark"
          :content="widget.options.tip"
          placement="right-end"
        >
          <!--                 <span  :style="{color:(widget.options.color.length>0?widget.options.color:'')}">{{dataModel}}</span>-->
          <span
            :style="{
              'font-weight': widget.options.bold ? 'bold' : 'normal',
              color: widget.options.color,
              fontSize: widget.options.fontSize + 'px'
            }"
            >{{ dataModel }}</span
          >
        </el-tooltip>
      </span>
      <span v-else>
        <span
          :style="{
            'font-weight': widget.options.bold ? 'bold' : 'normal',
            color: widget.options.color,
            fontSize: widget.options.fontSize + 'px'
          }"
          >{{ dataModel }}</span
        >
      </span>
    </template>

    <template
      v-if="widget.type == 'processInfo' && widget.options.show == true"
    >
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="taskName" label="节点名称" width="120">
        </el-table-column>
        <el-table-column prop="userName" label="执行人" width="120">
        </el-table-column>
        <el-table-column prop="statusVal" label="操作" width="120">
        </el-table-column>
        <el-table-column prop="opinion" label="审批意见" width="120">
        </el-table-column>
        <el-table-column prop="createTime" label="接受时间"> </el-table-column>
        <el-table-column prop="endTime" label="审批时间"> </el-table-column>
      </el-table>
    </template>
    <!-- 子表单的预览 -->
    <template v-if="widget.type == 'table' && widget.options.show == true">
      <fm-form-table
        v-model="dataModel"
        :widget="widget"
        :columns="widget.tableColumns"
        :models="dataModels"
        :remote="remote"
        :blanks="blanks"
        :models_temp="models_temp"
      >
        <!--   <template v-slot:[blank.name]="scope" v-for="blank in blanks">
          <slot :name="blank.name" :model="scope.model"></slot>
        </template> -->
      </fm-form-table>
    </template>
    <!-- 区块的预览 -->
    <template v-if="widget.type == 'block' && widget.options.show == true">
      <fm-form-block
        v-model="dataModel"
        :widget="widget"
        :columns="widget.tableColumns"
        :models="dataModels"
        :remote="remote"
        :blanks="blanks"
        :strutAll="strutAll"
        :path="path"
        :models_temp="models_temp"
      >
        <template v-slot:[blank.name]="scope" v-for="blank in blanks">
          <slot :name="blank.name" :model="scope.model"></slot>
        </template>
      </fm-form-block>
    </template>
    <!-- card的预览 -->
    <template v-if="widget.type == 'card' && widget.options.show == true">
      <generate-card
        v-model="dataModel"
        :widget="widget"
        :columns="widget.tableColumns"
        :models="dataModels"
        :remote="remote"
        :blanks="blanks"
        :strutAll="strutAll"
        :path="path"
        :models_temp="models_temp"
      >
        <template v-slot:[blank.name]="scope" v-for="blank in blanks">
          <slot :name="blank.name" :model="scope.model"></slot>
        </template>
      </generate-card>
    </template>

    <!-- tabs的预览 -->
    <template v-if="widget.type == 'tabs' && widget.options.show == true">
      <generate-tabs
        v-model="dataModel"
        :widget="widget"
        :columns="widget.tabColumns"
        :models="dataModels"
        :remote="remote"
        :blanks="blanks"
        :strutAll="strutAll"
        :path="path"
        :models_temp="models_temp"
      >
        <template v-slot:[blank.name]="scope" v-for="blank in blanks">
          <slot :name="blank.name" :model="scope.model"></slot>
        </template>
      </generate-tabs>
    </template>
    <!-- 折叠面板的预览 -->
    <template v-if="widget.type == 'collapse' && widget.options.show == true">
      <collapse-tabs
        v-model="dataModel"
        :widget="widget"
        :columns="widget.tabColumns"
        :models="dataModels"
        :remote="remote"
        :blanks="blanks"
        :strutAll="strutAll"
        :path="path"
        :models_temp="models_temp"
      >
        <template v-slot:[blank.name]="scope" v-for="blank in blanks">
          <slot :name="blank.name" :model="scope.model"></slot>
        </template>
      </collapse-tabs>
    </template>
    <!--省市级联-->
    <template v-if="widget.type == 'distpicker' && widget.options.show == true">
      <distpicker
        :province="widget.options.distpicker.province"
        :city="widget.options.distpicker.city"
        :area="widget.options.distpicker.area"
        v-model="dataModel"
        @selected="onSelected"
      ></distpicker>
      <span
        v-if="widget.options.showAnnotation"
        :style="{
          'margin-left': showAnnotation(),
          color: showAnnotationColor()
        }"
        v-on:click="addAnnotation()"
        >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <template v-if="widget.type == 'vue2Editor'">
      <div id="app">
        <vue-editor
          class="ql-editor-class"
          v-model="dataModel"
          useCustomImageHandler
          @image-added="handleImageAdded"
        >
        </vue-editor>
      </div>
      <span
        v-if="widget.options.showAnnotation"
        :style="{
          'margin-left': showAnnotation(),
          color: showAnnotationColor()
        }"
        v-on:click="addAnnotation()"
        >{{ widget.options.annotationTitle }}
      </span>
    </template>

    <!-- 自定义 -->
    <!-- 提示弹窗 -->
    <template v-if="widget.type == 'tipsDialog' && widget.options.show == true">
      <el-dialog
        title="提示信息"
        :visible.sync="dialogTipsVisible"
        width="80%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
      >
        <div class="project-lab">
          <div class="project-lable">{{ widget.options.placeholder }}</div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogTipsVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogTipsVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </template>
  </span>
</template>

<script>
import FmUpload from "./Upload";
import ImageUpload from "./widget/image/index";
import FmFormTable from "./FormTable/formTableIndex";
import request from "../util/request.js";
import { getAllControls, findTableColumnControls } from "./router/utils.js";
import API from "./router/api.js";
import { VueEditor } from "vue2-editor";
import axios from "axios";
import vm from "../main";
import Distpicker from "v-distpicker";

import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode
} from "element-china-area-data";
import { verification } from "./router/verification.js";
import { uniqueUser } from "./router/utils.js";
import FmFormBlock from "./FormBlock";
import GenerateTabs from "./generate/tabs/GenerateTabs";
import GenerateCard from "./generate/card/GenerateCard";
import CollapseTabs from "./generate/collapse/CollapseTabs";

export default {
  name: "generate-element-item",
  components: {
    FmUpload,
    FmFormTable,
    FmFormBlock,
    GenerateCard,
    CollapseTabs,
    GenerateTabs,
    VueEditor,
    ImageUpload,
    Distpicker
  },
  props: [
    "widget",
    "value",
    "models",
    "remote",
    "isTable",
    "blanks",
    "models_temp",
    "path",
    "strutAll"
  ],
  data() {
    return {
      distpicker: {
        province: "省",
        city: "市",
        area: "区"
      },
      obj: {},
      person: {
        name: "mark",
        gender: "男"
      },

      message: {
        a: "塞纳河畔 左岸的咖啡"
      },
      annotationForm: { context: "" },

      annotationDialogVisible: false,
      gridData: [],
      dynamicTags: ["标签一", "标签二", "标签三"],
      inputVisible: false,
      inputValue: "",
      formCustomDialogCurrentPage: 1,
      formCustomDialogPageSize: 10,
      formCustomDialogTotal: 0,
      remoteFuncsFields: [],
      formCustomDialogMultipleSelection: [],
      userDialogFormMultipleSelection: [],
      customDialogData: [],
      customDialogTableColumns: [],
      formCustomDialogData: {},
      dialogFormVisible: false,
      userDialogFormVisible: false,
      templateSelection: "",
      templateSelectionData: {},
      dataModel: this.value,
      tableData: [],
      dataModels: { ...this.models },
      provinceAndCityData: provinceAndCityData,
      regionData: regionData,
      provinceAndCityDataPlus: provinceAndCityDataPlus,
      regionDataPlus: regionDataPlus,
      selectedOptions: [],
      address: {
        province: "",
        city: "",
        county: ""
      },

      dialogTipsVisible: true
    };
  },
  mounted() {
    window.watchApi = this;
    this.getTableData();
    this.initTableData();
    this.initRemoteFuncs();
    // this.$set(this.obj,  '111', "4444");
  },
  created() {
    this.widget.options.remoteOptions = [];
    //表单渲染的时候，初始化数据
    if (this.widget.type == "userDialog") {
      var dataModels_userDialog = this.dataModels[this.widget.model];
      if (dataModels_userDialog) {
        this.widget.options.chooseFiledList = dataModels_userDialog;
      }
    }
    if (this.widget.type == "tag") {
      var dataModels_tag = this.dataModels[this.widget.model];
      if (dataModels_tag) {
        this.widget.options.options = dataModels_tag;
      }
      this.dataModels[this.widget.model] = this.widget.options.options;
    }
    if (this.widget.type == "progress") {
      this.dataModels[this.widget.model] = this.widget.options.percentage;
    }
    if (this.widget.type == "steps") {
      this.widget.options.defaultValue = this.dataModels[this.widget.model];
    }
    if (this.widget.type == "distpicker") {
      var distpicker_val = this.dataModels[this.widget.model];
      if (distpicker_val) {
        this.widget.options.distpicker.province = distpicker_val["province"];
        this.widget.options.distpicker.city = distpicker_val["city"];
        this.widget.options.distpicker.area = distpicker_val["county"];
      }
    }
  },
  methods: {
    validatePass(rule, info, callback) {
      var type = rule.customerType;
      var length = rule.val;
    },
    checkboxChange: function(data) {},
    watchForm: function(obj1) {
      var self = this;

      for (let key in obj1) {
        vm.jsExtend[key] = obj1[key];
      }
    },
    clickBtn: function() {
      var jsExpand = this.widget.options.jsExpand;
      var scriptContext = jsExpand;
      // 创建script标签，执行script内容
      let script = document.createElement("script");
      script.type = "text/javascript";
      script.text = scriptContext;
      document.getElementsByTagName("head")[0].appendChild(script);
    },
    annotationConfirm: function() {
      this.widget.options.annotationTitle = "查看批注";
      this.widget.options.annotationContext = this.annotationForm.context;
      this.annotationForm.context = "";
      this.annotationDialogVisible = false;
    },
    clearAnnotation: function() {
      this.annotationForm.context = "";
    },
    showAnnotation() {
      return "10px";
    },
    showAnnotationColor() {
      if (this.widget.options.annotationTitle == "添加批注") {
        return "#3399ff";
      } else {
        return "#cc0000";
      }
    },
    addAnnotation() {
      this.annotationForm.context = this.widget.options.annotationContext;
      this.annotationDialogVisible = true;
    },
    handleImageAdded: function(file, Editor, cursorLocation, resetUploader) {
      var formData = new FormData();
      formData.append("file", file);
      const url = this.widget.options.action;

      var options = {
        // 设置axios的参数
        url: url,
        data: formData,
        name: file.name,
        method: "post",
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      axios({
        method: "POST",
        url: url,
        data: formData
      })
        .then(res => {
          let data = res.data;
          if (data.code == 0) {
            Editor.insertEmbed(cursorLocation, "image", data.url);
          } else {
            this.$message.error(data.message || "操作失败");
          }
        })
        .catch(e => {
          alert(e);
        });
    },
    onSelected(data) {
      this.address.province = data.province.value;
      this.address.city = data.city.value;
      this.address.county = data.area.value;
      var model = this.widget.model;
      this.dataModels[model] = this.address;
    },
    handleTagClose(tag, index) {
      this.widget.options.options.splice(index, 1);
      this.dataModels[this.widget.model] = this.widget.options.options;
    },
    nextStep(widget, index) {
      var active = widget.options.defaultValue;
      var activeLength = widget.options.stepItemOptions.length - 1;
      if (active < activeLength) {
        widget.options.defaultValue = active + 1;
      }
      if (widget.options.defaultValue >= activeLength) {
        widget.options.nextStep = true;
      }
      this.dataModels[widget.model] = widget.options.defaultValue;
    },
    handleClose(tag) {
      this.widget.options.chooseFiledList.splice(
        this.dynamicTags.indexOf(tag),
        1
      );
    },
    userDialogFormchangeFun(val) {
      this.userDialogFormMultipleSelection = val;
    },
    confirmFormCustomDialog: function() {
      var formCustomDialogMultipleSelection = this
        .formCustomDialogMultipleSelection;
      this.dialogFormVisible = false;
      var templateSelectionData = this.templateSelectionData;
      var chooseFiledList = this.widget.options.chooseFiledList;
      for (var i = 0; i < chooseFiledList.length; i++) {
        var chooseFiled = chooseFiledList[i];
        var columnKey = chooseFiled.columnKey;
        var target = chooseFiled.target;
        if (target) {
          var columnKey_val = templateSelectionData[columnKey];
          this.dataModels[target] = columnKey_val;
        }
      }
    },

    confirmUserFormCustomDialog: function() {
      //组织
      var userDialogFormMultipleSelections = this
        .userDialogFormMultipleSelection;
      var isSingle = this.widget.options.isSingle;
      var chooseFiledList = [];
      var selectorType = this.widget.options.selectorType;
      if (isSingle) {
        for (var i = 0; i < userDialogFormMultipleSelections.length; i++) {
          var obj = {};
          var userDialogFormMultipleSelection =
            userDialogFormMultipleSelections[i];
          if ("user-selector" == selectorType) {
            obj["lable"] = userDialogFormMultipleSelections[i].FULLNAME;
            obj["key"] = userDialogFormMultipleSelections[i].USER_NO;
          } else if ("role-selector" == selectorType) {
            obj["lable"] = userDialogFormMultipleSelections[i].NAME;
            obj["key"] = userDialogFormMultipleSelections[i].code;
          } else if ("job_selector" == selectorType) {
            obj["lable"] = userDialogFormMultipleSelections[i].name;
            obj["key"] = userDialogFormMultipleSelections[i].code;
          } else if ("post_selector" == selectorType) {
            obj["lable"] = userDialogFormMultipleSelections[i].POS_NAME;
            obj["key"] = userDialogFormMultipleSelections[i].code;
          }
          chooseFiledList.push(obj);
        }
        if (this.widget.options.chooseFiledList) {
          chooseFiledList = chooseFiledList.concat(
            this.widget.options.chooseFiledList
          );
          chooseFiledList = uniqueUser(chooseFiledList);
        }
        this.widget.options.chooseFiledList = chooseFiledList;
        this.dataModels[this.widget.model] = chooseFiledList;
      } else {
        var chooseFiledList = [];
        var obj = {};
        if ("user-selector" == selectorType) {
          obj["lable"] = this.templateSelectionData.FULLNAME;
          obj["key"] = this.templateSelectionData.USER_NO;
        } else if ("role-selector" == selectorType) {
          obj["lable"] = this.templateSelectionData.NAME;
          obj["key"] = this.templateSelectionData.code;
        } else if ("job_selector" == selectorType) {
          obj["lable"] = this.templateSelectionData.name;
          obj["key"] = this.templateSelectionData.code;
        } else if ("post_selector" == selectorType) {
          obj["lable"] = this.templateSelectionData.POS_NAME;
          obj["key"] = this.templateSelectionData.code;
        }
        chooseFiledList.push(obj);
        this.widget.options.chooseFiledList = chooseFiledList;
        this.dataModels[this.widget.model] = chooseFiledList;
      }

      this.userDialogFormVisible = false;
    },
    changeFormCustomDialogFun: function(val) {
      this.formCustomDialogMultipleSelection = val;
    },
    handleformCustomDialogSizeChange(val) {
      this.formCustomDialogPageSize = val;
      this.formCustomDialogTableChange();
    },
    handleformCustomDialogCurrentChange(val) {
      this.formCustomDialogCurrentPage = val;
      this.formCustomDialogTableChange();
    },
    handleUserformCustomDialogSizeChange(val) {
      this.formCustomDialogPageSize = val;
      this.formUserCustomDialogTableChange();
    },
    handleUserformCustomDialogCurrentChange(val) {
      this.formCustomDialogCurrentPage = val;
      this.formUserCustomDialogTableChange();
    },
    formUserCustomDialogTableChange: function() {
      var customDialogAlias = this.widget.options.customDialogAlias;
      if (customDialogAlias.length <= 0) {
        customDialogAlias = this.widget.options.selectorType;
      }
      request
        .get(
          API.prefix +
            "/form/customDialog/get/alia/" +
            customDialogAlias +
            "?length=" +
            this.formCustomDialogPageSize +
            "&page=" +
            this.formCustomDialogCurrentPage
        )
        .then(res => {
          if (res.code == 0) {
            var data = res.data;

            this.customDialogData = data;
            var tableColumns = res.tableColumns;
            this.customDialogTableColumns = tableColumns;
            this.formCustomDialogData = res.formCustomDialogData;
            this.userDialogFormVisible = true;
            this.formCustomDialogTotal = parseInt(res.count);
          }
        });
    },
    formCustomDialogTableChange: function() {
      var customDialogAlias = this.widget.options.customDialogAlias;
      if (customDialogAlias.length <= 0) {
        customDialogAlias = this.widget.options.selectorType;
      }
      request
        .get(
          API.prefix +
            "/form/customDialog/get/alia/" +
            customDialogAlias +
            "?length=" +
            this.formCustomDialogPageSize +
            "&page=" +
            this.formCustomDialogCurrentPage
        )
        .then(res => {
          if (res.code == 0) {
            var data = res.data;

            this.customDialogData = data;
            var tableColumns = res.tableColumns;
            this.customDialogTableColumns = tableColumns;
            this.formCustomDialogData = res.formCustomDialogData;
            this.dialogFormVisible = true;
            this.formCustomDialogTotal = parseInt(res.count);
          }
        });
    },

    singleElection(row) {
      this.templateSelection = this.tableData.indexOf(row);
      // this.templateRadio = row.id;
      this.templateSelectionData = row;
    },
    userDialogingleElection(row) {
      this.templateSelection = this.tableData.indexOf(row);
      // this.templateRadio = row.id;
      this.templateSelectionData = row;
    },
    handleDialog: function() {
      if (this.widget.options.customDialogAlias.length > 0) {
        var customDialogAlias = this.widget.options.customDialogAlias;
        request
          .get(API.prefix + "/form/customDialog/get/alia/" + customDialogAlias)
          .then(res => {
            if (res.code == 0) {
              var data = res.data;
              this.customDialogData = data;
              var tableColumns = res.tableColumns;
              this.customDialogTableColumns = tableColumns;
              this.formCustomDialogData = res.formCustomDialogData;
              this.dialogFormVisible = true;
              this.formCustomDialogTotal = parseInt(res.count);
            }
          });
      } else {
        this.$message.error("没有选择关联的对话框数据");
      }
    },
    handleUserDialog: function() {
      if (this.widget.options.selectorType.length > 0) {
        var selectorType = this.widget.options.selectorType;
        request
          .get(API.prefix + "/form/customDialog/get/alia/" + selectorType)
          .then(res => {
            if (res.code == 0) {
              var data = res.data;
              this.customDialogData = data;
              var tableColumns = res.tableColumns;
              this.customDialogTableColumns = tableColumns;
              this.formCustomDialogData = res.formCustomDialogData;
              this.userDialogFormVisible = true;
              this.formCustomDialogTotal = parseInt(res.count);
            }
          });
      } else {
        this.$message.error("请先设置选择器");
      }
    },
    validatePass(rule, info, callback) {
      verification(rule, info, callback);
    },
    fireControlsRule: function(data) {
      var dataModel = this.dataModel;

      var effect = this.widget.options.effect;
      if (effect.length > 0) {
        if (this.strutAll) {
          var list = this.strutAll.list;
          if (list) {
            for (var i = 0; i < effect.length; i++) {
              var nodes = effect[i];
              if (nodes.value == dataModel) {
                var effects = nodes.effects;

                for (var j = 0; j < effects.length; j++) {
                  var node = effects[j];
                  var target = node.target;
                  var value = node.value;
                  var type = node.type;

                  for (let j = 0; j < list.length; j++) {
                    var allNode = list[j];
                    if (allNode.model == target) {
                      if (type == "n") {
                        allNode.options.show = false;
                      } else if (type == "w") {
                        allNode.options.show = true;
                      } else if (type == "b") {
                        allNode.options.required = true;
                        var data = {};
                        data["validator"] = this.validatePass;
                        data["trigger"] = "blur";
                        data["msg"] = "必填";
                        data["customerType"] = "nonull";
                        allNode.rules.push(data);
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    },
    initRemoteFuncs: function() {
      var remoteUrlKey = this.widget.options.remoteUrlKey;
      if (this.widget.options) {
        if (remoteUrlKey) {
          if (this.widget.type == "select" || this.widget.type == "radio") {
            if (remoteUrlKey && remoteUrlKey.length > 0) {
              request.get(API.prefix + remoteUrlKey).then(res => {
                var options = res.data;
                var datas = [];
                if (res.code == 0) {
                  for (var i = 0; i < options.length; i++) {
                    var obj = {};
                    obj["label"] = options[i]["label"];
                    obj["value"] = options[i]["value"];
                    datas.push(obj);
                  }
                  this.remoteFuncsFields = datas;
                }
              });
            }
          } else {
            if (this.widget.options.props) {
              var label = this.widget.options.props.label;
              var value = this.widget.options.props.value;
              if (remoteUrlKey && remoteUrlKey.length > 0) {
                request
                  .get(API.prefix + "/form/customQuery/manger/" + remoteUrlKey)
                  .then(res => {
                    var options = res.data;
                    var datas = [];
                    if (res.code == 0) {
                      for (var i = 0; i < options.length; i++) {
                        var obj = {};
                        obj[label] = options[i][label];
                        obj[value] = options[i][value];
                        datas.push(obj);
                      }
                      this.remoteFuncsFields = datas;
                    }
                  });
              }
            }
          }
        }
      }
    },
    changeDate() {
      var val = this.dataModel;
      var format = this.widget.options.format;
      var strutAll = this.strutAll;
      var path = this.path;
      if (path != undefined) {
        //区域外的
        if (path) {
          var pathDot = path.split(".");
          if (pathDot) {
            var blockId = pathDot[0];
            var index = pathDot[1];
            var modelId = pathDot[2];
            var list = strutAll.list;
            var curNode = this.widget.model;
            var otherNodes = findTableColumnControls(list, blockId, index);
            if (otherNodes) {
              for (var i = 0; i < otherNodes.length; i++) {
                var node = otherNodes[i];
                var dateCalculationEnd = node.options.dateCalculationEnd;
                var dateCalculationStart = node.options.dateCalculationStart;

                var dateCalcDiffType = node.options.dateCalcDiffType;

                var dateCalculationEndVal = this.$parent.elForm.model[blockId][
                  index
                ][node.options.dateCalculationEnd];
                var dateCalculationStartVal = this.$parent.elForm.model[
                  blockId
                ][index][node.options.dateCalculationStart];
                var operateVal = "";
                if (dateCalculationStartVal && dateCalculationEndVal) {
                  if (
                    dateCalculationEnd == curNode ||
                    dateCalculationStart == curNode
                  ) {
                    operateVal =
                      dateCalculationEndVal - dateCalculationStartVal;
                  }
                  if (operateVal > 0) {
                    if (dateCalcDiffType == "day") {
                      operateVal = operateVal / (24 * 60 * 60 * 1000);
                    } else if (dateCalcDiffType == "hour") {
                      operateVal = operateVal / (60 * 60 * 1000);
                    } else if (dateCalcDiffType == "minute") {
                      operateVal = operateVal / (60 * 1000);
                    } else if (dateCalcDiffType == "second") {
                      operateVal = operateVal / 1000;
                    }
                    operateVal = parseInt(operateVal);
                    this.$parent.elForm.model[blockId][index][
                      node.model
                    ] = operateVal;
                  }
                }
              }
            }
          }
        }
      } else {
        var list = strutAll.list;
        var otherNodes = getAllControls(strutAll.list, this.widget.model);
        var curNode = this.widget.model;
        for (var i = 0; i < otherNodes.length; i++) {
          var node = otherNodes[i];
          var dateCalculationEnd = node.options.dateCalculationEnd;
          var dateCalculationStart = node.options.dateCalculationStart;

          var dateCalcDiffType = node.options.dateCalcDiffType;

          var dateCalculationEndVal = this.$parent.elForm.model[
            node.options.dateCalculationEnd
          ];
          var dateCalculationStartVal = this.$parent.elForm.model[
            node.options.dateCalculationStart
          ];
          var operateVal = "";
          if (dateCalculationStartVal && dateCalculationEndVal) {
            if (
              dateCalculationEnd == curNode ||
              dateCalculationStart == curNode
            ) {
              operateVal = dateCalculationEndVal - dateCalculationStartVal;
            }
            if (operateVal > 0) {
              if (dateCalcDiffType == "day") {
                operateVal = operateVal / (24 * 60 * 60 * 1000);
              } else if (dateCalcDiffType == "hour") {
                operateVal = operateVal / (60 * 60 * 1000);
              } else if (dateCalcDiffType == "minute") {
                operateVal = operateVal / (60 * 1000);
              } else if (dateCalcDiffType == "second") {
                operateVal = operateVal / 1000;
              }
              operateVal = parseInt(operateVal);
              this.$parent.elForm.model[node.model] = operateVal;
            }
          }
        }
      }
    },
    elShowWidth(elIsTable, wowidth) {
      if (elIsTable == "table") {
        return "95%";
      } else if (elIsTable == "block") {
        return "70%";
      } else {
        if (wowidth == "200px") {
          return "100%";
        } else {
          return wowidth;
        }
      }
    },

    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    initTableData() {
      var self = this;
      self.gridData = [{ name: "张三" }, { name: "李四" }];
    },
    getTableData: function() {
      var self = this;
      if (this.$route) {
        let params = this.$route.query;
        var processInstanceId = params.processInstanceId;
      }

      self.tableData = [];
      // if (processInstanceId){
      //     request.get(API.prefix+'/a1bpmn/api/runtime/hisInstance/v2/nodeOpinion/'+processInstanceId+'?page=1&limit=5').then(res => {
      //         var data=  res.data;
      //
      //
      //     })
      // }
      // if (checkIsNullOrEmpty(processInstanceId)) {
      //     if (self.tableData.length==0){
      //
      //     }
      // }
    },
    handleEdit(index, row) {
      // console.log(index, row.name);
    },
    handleDelete(index, row) {
      //console.log(index, row);
    },
    processRemoteProps(children, props) {
      if (children.length) {
        return children.map(item => {
          if (this.processRemoteProps(item[props.children]).length) {
            return {
              value: item[props.value],
              label: item[props.label],
              children: this.processRemoteProps(item[props.children])
            };
          } else {
            return {
              value: item[props.value],
              label: item[props.label]
            };
          }
        });
      } else {
        return [];
      }
    }
  },
  watch: {
    value(newVal, oldVal) {
      this.dataModel = newVal;
    },
    dataModel(val, oldVal) {
      var _vm = vm;
      if (_vm.jsExtend) {
        if (_vm.jsExtend[this.widget.model]) {
          _vm.jsExtend[this.widget.model](val, oldVal);
        }
      }

      this.$emit("input", val);

      var parent = this.$parent;
      while (
        parent != undefined &&
        parent.hasOwnProperty("$options") &&
        parent.$options._componentTag != "fm-form-block" &&
        parent.$options._componentTag != "fm-form-table"
      ) {
        parent = parent.$parent;
      }
      if (
        parent != undefined &&
        parent.hasOwnProperty("$options") &&
        parent.$options._componentTag == "fm-form-block"
      ) {
        /* this.models[this.widget.model]=val;
                     this.models_temp.push(this.widget.model);*/
        this.models[this.path] = val;
        this.models_temp.push(this.path);
      } else if (
        parent != undefined &&
        parent.hasOwnProperty("$options") &&
        parent.$options._componentTag == "fm-form-table"
      ) {
        //                    this.models[this.widget.model]=val;
        this.models[this.path] = val;
        this.models_temp.push(this.path);
      } /*else{
                    this.models[this.widget.model]=val;
                }*/
    },
    models: {
      deep: true,
      handler(val) {
        this.dataModels = this.models;
      }
    },
    dataModels: {
      deep: true,
      handler(val) {
        // this.dataModel = val[this.widget.model]   //--此行代码在表格预览有问题，导致不可输入
        this.$emit("update:models", val);
      }
    },

    // 提示弹窗事件
    cancelTips() {
      this.dialogTipsVisible = false;
      this.$router.push({
        path: "/homepage"
      });
    },
    confirmTips() {
      this.dialogTipsVisible = false;
    },
  }
};
</script>

<style type="text/css">
.ql-editor-class {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1.42;
  height: 100%;
  outline: none;
  padding: 0 !important;
  tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  word-wrap: break-word;
}
.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.st0 {
  fill: #f9f9f9;
  stroke: #f9f9f9;
  stroke-miterlimit: 10;
}

.st1 {
  fill: #ffffff;
  stroke: #f9f9f9;
  stroke-miterlimit: 10;
}

.st2 {
  fill: #ffffff;
  stroke: #f9f9f9;
  stroke-width: 0.5;
  stroke-miterlimit: 10;
}

.st3 {
  opacity: 0.65;
  fill: #040000;
}

.st4 {
  font-family: "MicrosoftYaHei";
}

.st5 {
  font-size: 10px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
